<template>
    <main class="header">    
        <div>{{userInfo.systemUserUsername}}</div>
         <el-dropdown @command="handleCommand"> 
         <span class="el-dropdown-link" >
             <img :src="imgUrl" alt="" style="width: 50px;height: 50px;border-radius: 25px;">
             <el-icon class="el-icon--right"><arrow-down /></el-icon>
         </span>
         <template #dropdown>
             <el-dropdown-menu>
                 <el-dropdown-item command="a">个人中心</el-dropdown-item>
                 <el-dropdown-item command="b">布局管理</el-dropdown-item>
                 <el-dropdown-item command="c" divided>退出登录</el-dropdown-item>
             </el-dropdown-menu>
         </template>
     </el-dropdown>
    </main> 
 </template>

 <script setup>
 import { useRouter } from 'vue-router';
 const router = useRouter();
  import { ref,onMounted } from 'vue';
// 定义一个路径
const url = ref('http://localhost:8080/file/downLoad?fileName=')
const imgUrl = ref('')

 const handleCommand = (command) => {
   console.log(command);
   if (command == 'a') {
  
     router.replace({name:"个人中心"}) 
   }if (command == 'c') {
     close()
   }
 }
 onMounted(() => {
   getUserInfo();
 })

const userInfo = ref(JSON.parse(localStorage.getItem('userInfo'))) // 改为响应式对象

 const getUserInfo = () => {
   userInfo.value = JSON.parse(localStorage.getItem('userInfo')) // 新增重新获取
  //  console.log(userInfo.value.systemUserImg);
   imgUrl.value = url.value + userInfo.value.systemUserImg; 
 }
 const close=()=>{
   localStorage.removeItem('userInfo')
   localStorage.removeItem('token')
   router.replace("/")
   imgUrl.value=''
 }
 </script>
 
 <style scoped>
 .header{display: flex;align-items: center;justify-content: end;}
 .el-dropdown{margin-left: 10px;} 
 main{display: flex; align-content: center;}
 
 </style>